import React from "react";
import { StyleSheet, Text, View,FlatList,Dimensions, ActivityIndicator,Image,ScrollView,Button} from 'react-native';
import { Container, Header, Content, List, ListItem,Thumbnail,Icon,Item,Input,Left, Body, Right, Switch } from 'native-base';
import Swiper from 'react-native-swiper';
import {Actions} from 'react-native-router-flux'
import {getAllFlatListData,getPageFlatListData} from '../services/FlatListDataserveices'
let moment = require('moment');
require('moment/locale/zh-cn'); 
moment.locale('zh-cn');
class Nav extends React.Component{
  constructor(props){
    super(props);
    this.state ={text:'物品'}
  }
  render(){
    return(
      <View style={{flexDirection: 'row',height:'auto'}}>
        <View style={styles.hang}><Text style={styles.font}>杭州</Text></View>
        <View style={styles.hangs}><Item style={{color:'white',borderColor:'white',}}>
            <Icon name="ios-search" style={{color:'white'}}/>
            <Input placeholder={this.state.text} style={{height:30,borderWidth:1,width:140,borderColor:'#ff7a00',}}/>
          </Item></View>
        <View style={styles.hang}><ListItem icon><Icon active name="barcode" style={{color:'white'}}/></ListItem></View>
        <View style={styles.hang}><ListItem icon><Icon active name="logo-twitch" style={{color:'white'}}/></ListItem></View>  
      </View>
    )
  }
}
class Jg extends React.Component{
  render(){
    return(
      <View style={{flexDirection:'row',backgroundColor:'#ff7a00',height:'auto',justifyContent:'space-around',paddingTop:10,paddingBottom:5,width:'auto'}}>
        <View style={{flexDirection:'column',alignItems:'center',margin:'auto',flex:1}}>
          <ListItem icon><Icon active name="qr-scanner" style={{color:'white',fontSize:50}}/></ListItem>
          <Text style={{color:'white',fontSize:15}}>&nbsp;&nbsp;&nbsp;&nbsp;扫一扫</Text>
        </View>
        <View style={{flexDirection:'column',alignItems:'center',margin:'auto',flex:1}}>
          <ListItem icon><Icon active name="appstore" style={{color:'white',fontSize:50}}/></ListItem>
          <Text style={{color:'white',fontSize:15}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;到店自提</Text>
        </View>
        <View style={{flexDirection:'column',alignItems:'center',margin:'auto',flex:1}}>
          <ListItem icon><Icon active name="stopwatch" style={{color:'white',fontSize:50}}/></ListItem>
          <Text style={{color:'white',fontSize:15,textAlign:'left'}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预订</Text>
        </View>
        <View style={{flexDirection:'column',alignItems:'center',flex:1,margin:'auto'}}>
          <ListItem icon><Icon active name="timer" style={{color:'white',fontSize:50}}/></ListItem>
          <Text style={{color:'white',fontSize:15,textAlign:'left'}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;外卖</Text>
        </View>
      </View>
    )
  }
}
class Imaged extends React.Component{
  render(){
    return(
      <View style={{height:150,padding:5,borderRadius:5,width:'auto'}}>
          <Swiper autoplay={true}> 
              <Image source={require('../assets/1.jpg')} style={{height:130,borderRadius:5,width:'auto'}}></Image>
              <Image source={require('../assets/2.jpg')} style={{height:130,borderRadius:5,width:'auto'}}></Image>
              <Image source={require('../assets/3.jpg')} style={{height:130,borderRadius:5,width:'auto'}}></Image>
              <Image source={require('../assets/4.jpg')} style={{height:130,borderRadius:5,width:'auto'}}></Image>
              <Image source={require('../assets/5.jpg')} style={{height:130,borderRadius:5,width:'auto'}}></Image>
          </Swiper>
      </View>
    )
  }
}
class Jgg extends React.Component{
  render(){
    return(
      <View style={{flexDirection:'row',backgroundColor:'#f4f5f7',height:'auto',width:'auto'}}>
        <View style={{flexDirection:'column',backgroundColor:'white',justifyContent:'center',alignItems:'center',flex:1,}}>
          <ListItem icon><Icon active name="pizza" style={{color:'#ff5055',fontSize:35}}/></ListItem>
          <Text style={{color:'black',fontSize:15}}>&nbsp;&nbsp;&nbsp;&nbsp;美食</Text>
          <ListItem icon><Icon active name="calculator" style={{color:'#ffbd32',fontSize:35}}/></ListItem>
          <Text style={{color:'black',fontSize:15}}>&nbsp;&nbsp;&nbsp;&nbsp;休闲娱乐</Text>
        </View>
        <View style={{flexDirection:'column',justifyContent:'center',backgroundColor:'white',alignItems:'center',flex:1}}>
          <ListItem icon><Icon active name="film" style={{color:'#ff4859',fontSize:35}}/></ListItem>
          <Text style={{color:'black',fontSize:15}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;淘票票</Text>
          <ListItem icon><Icon active name="pint" style={{color:'#04a1ff',fontSize:35}}/></ListItem>
          <Text style={{color:'black',fontSize:15}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超市</Text>
        </View>
        <View style={{flexDirection:'column',backgroundColor:'white',justifyContent:'center',alignItems:'center',flex:1,}}>
          <ListItem icon><Icon active name="business" style={{color:'#05a7ff',fontSize:35}}/></ListItem>
          <Text style={{color:'black',fontSize:15,textAlign:'left'}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;酒店预订</Text>
          <ListItem icon><Icon active name="heart-empty" style={{color:'#ff5553',fontSize:35}}/></ListItem>
          <Text style={{color:'black',fontSize:15,textAlign:'left'}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;结婚</Text>
        </View>
        <View style={{flexDirection:'column',justifyContent:'center',backgroundColor:'white',alignItems:'center',flex:1,}}>
          <ListItem icon><Icon active name="nutrition" style={{color:'#9648fe',fontSize:35}}/></ListItem>
          <Text style={{color:'black',fontSize:15,textAlign:'left'}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ktv</Text>
          <ListItem icon><Icon active name="jet" style={{color:'#ffc536',fontSize:35}}/></ListItem>
          <Text style={{color:'black',fontSize:15,textAlign:'left'}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;飞机票</Text>
        </View>
      </View>
    )
  }
}
class Imagese extends React.Component{
  render(){
    return(
      <View style={{height:'auto',width:'auto',padding:4,borderRadius:5}}>
        <Image source={require('../assets/6.png')} style={{height:120,width:'auto',borderRadius:5}}/>
      </View>
    )
  }
}
class FlatListIem extends React.Component{
  render(){
    const {title,img,content,time,stars}=this.props.item;
    return(
      <Container style={{height:'auto',backgroundColor:'#f4f5f7',padding:5}}>
          <List style={{backgroundColor:'white',width:'auto',height:'auto',borderRadius:5}}>
            <ListItem thumbnail>
              <Left>
                <Thumbnail square source={{ uri:img}} />
              </Left>
              <Body>
                <Text style={{fontSize:20}}>{title}</Text>
                <Text note numberOfLines={2}>{content}</Text>
                <Text style={{color:'red'}}>￥{stars.number}元</Text>
              </Body>
            </ListItem>
          </List>
      </Container>
    )
  }
}
class Listm extends React.Component{
  constructor(props){
      super(props);
      this.state={
          flatListDataFromserver:[],
          page:1,
          isloadMore:false,
          loading:false
      }
  }
  makeRemoteRequest=()=>{
      this.setState({
          isloadMore:true,
          loading:true
      })
      getPageFlatListData({page:this.state.page}).then(data=>{
          this.setState({
              flatListDataFromserver:[...this.state.flatListDataFromserver,...data],
              isloadMore:false,
              loading:false
          })
      })
  }
  componentDidMount(){
     this.makeRemoteRequest();
  }
  _keyExtractor = (item, index) => item.id.toString();
  loadMoreHanlder=()=>{
      if(!this.state.isloadMore){
          this.setState(prevState=>{
              return {
                  page:prevState.page+1
              }
          },()=>{
              this.makeRemoteRequest();
          })
      } 
  }
 render(){
     return(
      <View style={styles.container}>
             <FlatList
              data={this.state.flatListDataFromserver}
              keyExtractor={this._keyExtractor}
              onEndReached ={this.loadMoreHanlder}
              onEndReachedThreshold={0.1}
              renderItem={({item,index}) =>{
                  return <FlatListIem item={item} index={index} />
              }}
              />
         </View>
     )
  }
}



export default class Home extends React.Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <Nav/>
        <Jg/>
        <Imaged/>
        <Jgg/>
        <Imagese/>
        <Listm/>
        <Button title="跳转至详情页" onPress={()=>{
          Actions.datiles({id:123,otherParams:'otherParams'});
        }}></Button>
      </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#fff'
  },
  hang:{
    flex:1,
    width: 100, 
    height: 60,
    backgroundColor:'#ff7a00',
    justifyContent:'center',
    alignItems:'center',
  },
  hangs:{
    flex:2,
    height: 60,
    backgroundColor:'#ff7a00',
    justifyContent:'center',
    alignItems:'center',
  },
  font:{
    color:'white',
    textAlign:'right',
    lineHeight:60
  }

});